import React from 'react';
import { Space, Input, InputNumber, Tag, Radio, Checkbox, Card } from 'antd';
import { Question, QuestionType } from '@/types/question';
import CodeHighlight from '@/components/CodeHighlight';
import styles from './QuestionDisplay.module.css';

interface QuestionDisplayProps {
  question: Question;
  index: number;
  onUpdateConfig: (key: string, value: any) => void;
}

const QuestionDisplay: React.FC<QuestionDisplayProps> = ({ question, index, onUpdateConfig }) => {
  // 渲染题目内容
  const renderContent = () => (
    <div className={styles.content}>
      <div className={styles.questionText}>
        {question.content || '(暂无内容)'}
      </div>

      {/* 代码块 */}
      {question.has_code && question.code_content && (
        <div className={styles.codeBlock}>
          <CodeHighlight 
            code={question.code_content}
            language={question.code_language || 'cpp'}
          />
        </div>
      )}
    </div>
  );

  // 渲染选项（单选/多选/判断）
  const renderChoices = () => {
    if (!question.choices || question.choices.length === 0) return null;

    if (question.type === QuestionType.SINGLE_CHOICE || question.type === QuestionType.TRUE_FALSE) {
      return (
        <Radio.Group disabled value={question.correct_answers?.[0]}>
          <Space direction="vertical">
            {question.choices.map(choice => (
              <Radio key={choice.key} value={choice.key}>
                {choice.key}. {choice.content}
                {choice.has_code && choice.code && (
                  <CodeHighlight code={choice.code} language={choice.language || 'cpp'} />
                )}
              </Radio>
            ))}
          </Space>
        </Radio.Group>
      );
    } else if (question.type === QuestionType.MULTIPLE_CHOICE) {
      return (
        <Checkbox.Group disabled value={question.correct_answers}>
          <Space direction="vertical">
            {question.choices.map(choice => (
              <Checkbox key={choice.key} value={choice.key}>
                {choice.key}. {choice.content}
                {choice.has_code && choice.code && (
                  <CodeHighlight code={choice.code} language={choice.language || 'cpp'} />
                )}
              </Checkbox>
            ))}
          </Space>
        </Checkbox.Group>
      );
    }

    return null;
  };

  // 渲染填空题
  const renderFillBlanks = () => {
    if (question.type !== QuestionType.FILL_BLANK) return null;

    return (
      <div>
        <div className={styles.label}>填空数量：{question.blank_count || 1}</div>
        <div className={styles.label}>
          标准答案：
          {question.correct_answers?.map((ans, idx) => (
            <Tag key={idx} color="green" style={{ marginLeft: 8 }}>
              第{idx + 1}空: {ans}
            </Tag>
          ))}
        </div>
      </div>
    );
  };

  // 渲染综合题
  const renderComposite = () => {
    if (question.type !== QuestionType.COMPOSITE || !question.sub_questions) return null;

    return (
      <div>
        <div className={styles.label}>子题数量：{question.sub_questions.length}</div>
        <Space direction="vertical" style={{ width: '100%', marginTop: 12 }}>
          {question.sub_questions.map((subQ, idx) => (
            <Card key={idx} size="small" title={`(${idx + 1}) ${subQ.content}`}>
              <div className={styles.subQuestion}>
                {/* 递归显示子题 */}
                {subQ.choices && subQ.choices.length > 0 && (
                  <Space direction="vertical">
                    {subQ.choices.map(choice => (
                      <div key={choice.key}>
                        {choice.key}. {choice.content}
                      </div>
                    ))}
                  </Space>
                )}
                <div style={{ marginTop: 8 }}>
                  <Tag color="green">
                    答案：{Array.isArray(subQ.correct_answers) 
                      ? subQ.correct_answers.join(', ') 
                      : subQ.correct_answers}
                  </Tag>
                </div>
              </div>
            </Card>
          ))}
        </Space>
      </div>
    );
  };

  return (
    <div className={styles.display}>
      {/* 题目内容 */}
      {renderContent()}

      {/* 答题区域 */}
      <div className={styles.answerArea}>
        {renderChoices()}
        {renderFillBlanks()}
        {renderComposite()}
      </div>

      {/* 提示和解析 */}
      {question.hint && (
        <div className={styles.hint}>
          💡 提示：{question.hint}
        </div>
      )}

      {question.answer_explanation && (
        <div className={styles.explanation}>
          📖 解析：{question.answer_explanation}
        </div>
      )}

      {/* 题目配置 */}
      <div className={styles.config}>
        <Space size="large" wrap>
          <span>
            分组：
            <Input
              value={(question as any)._group_name || ''}
              onChange={(e) => onUpdateConfig('_group_name', e.target.value)}
              placeholder="例如：选择题"
              style={{ width: 150, marginLeft: 8 }}
              size="small"
            />
          </span>
          <span>
            分数：
            <InputNumber
              value={(question as any)._score || 10}
              onChange={(value) => onUpdateConfig('_score', value || 10)}
              min={0}
              style={{ width: 100, marginLeft: 8 }}
              size="small"
            />
          </span>
          <span>
            难度：
            <Tag color="blue">{getDifficultyText(question.difficulty)}</Tag>
          </span>
          {question.tags && question.tags.length > 0 && (
            <span>
              标签：
              {question.tags.map((tag, idx) => (
                <Tag key={idx}>{tag}</Tag>
              ))}
            </span>
          )}
        </Space>
      </div>
    </div>
  );
};

const getDifficultyText = (difficulty: number): string => {
  const map: Record<number, string> = {
    1: '非常简单',
    2: '简单',
    3: '中等',
    4: '困难',
    5: '非常困难',
  };
  return map[difficulty] || '中等';
};

export default QuestionDisplay;

